<template>
    <el-container class="auto-width" direction="vertical">
        <el-alert
                v-if="pageInfo"
                :title="pageInfo.page < pageInfo.pageCount ? '玩命采集ing...不要关闭页面' : '采集完成'"
                :type="pageInfo.page < pageInfo.pageCount ? 'warning' : 'success'"
                show-icon
                :closable="false"
                style="margin-top: 10px">
            <slot name="description">
                共{{pageInfo.recordCount}}条数据，当前第{{pageInfo.page}}页，共{{pageInfo.pageCount}}页 <span style="font-weight: bold" v-if="pageInfo.page < pageInfo.pageCount">即将采集下一页.</span>
            </slot>
        </el-alert>
        <el-table
                v-if="pageInfo"
                :data="pageInfo.videos"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="片名">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="处理状态">
            </el-table-column>
        </el-table>
    </el-container>
</template>

<script>
    import AdminService from '../services/admin.service';
    import Loading from "../utils/loading";

    export default {
        name: "Spider",
        data() {
            return {
                pageInfo: null,
            };
        },

        methods: {
            async cj(flag, hour, page) {
                Loading.showLoad('正在采集...');
                let res = await AdminService.siteCJ(flag, hour, page);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    Loading.hideLoad();
                    return;
                }
                this.pageInfo = res.data;
                if (this.pageInfo.page < this.pageInfo.pageCount) {
                    let nextPg = this.pageInfo.page + 1;
                    setTimeout(() => {
                        this.cj(flag, hour, nextPg);
                    }, 3000);
                }
                Loading.hideLoad();
            },

        },

        async mounted() {
            const query = this.$route.query;
            this.cj(query.flag, query.hour, query.page);
        },
    };
</script>

<style scoped lang="scss">

</style>
